<template>
  <div>
    <div class="flex">
      <div>当前输入键：</div>
      <h3 v-for="item in listKey" :key="item">
        {{item}}
      </h3>
    </div>
    <div class="mt10">
      <div>
        <h4>使用shift + k 显示一串文字</h4>
        <div v-if="shift&&k">
          我是隐藏的文字，恭喜你看到了这段文字
        </div>
      </div>
    </div>
    <div class="mt30">
      <div>
        <h4>使用s + l 显示一段说明</h4>
        <div v-if="s_l">
          这是你使用S + L的快捷键后显示的一段说明
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, watch, computed } from 'vue';
import { useMagicKeys } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    function initState() {
      return {
        listKey: [],
      };
    }
    const state = reactive(initState());
    const { shift, s, k, s_l, current } = useMagicKeys();
    state.listKey = computed(() => Array.from(current));

    return {
      ...toRefs(state),
      current,
      shift,
      k,
      s_l,
    };
  },
};
</script>